<template>
    <!-- form 查询表单 -->
    <el-form :model="post" ref="formRef" label-width="auto" label-position="right" style="padding-bottom: 10px;">
        <el-row :gutter="20">
            <el-col :span="8">
                <el-form-item label="博客文本" prop="yhsf">
                    <el-input v-model="post.text" placeholder="请输入博客文本" clearable/>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="发布时间" prop="zcsj">
                    <el-input v-model="post.time" placeholder="请输入发布时间" clearable/>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="24">
                <el-button type="primary" @click="doList">查询</el-button>
                <el-button type="default" @click="reset">重置</el-button>
            </el-col>
        </el-row>
    </el-form>
    <!-- table 表格 -->
    <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="id" label="博客id"/>
        <el-table-column prop="yhm" label="用户名"/>
        <el-table-column prop="nc" label="用户昵称" />
        <el-table-column prop="tx" label="用户头像"/>
        <el-table-column prop="text" label="博客文本" />
        <el-table-column prop="likeCount" label="点赞数" />
        <el-table-column prop="collectCount" label="收藏数" />
        <el-table-column prop="commentCount" label="评论数" />
        <el-table-column prop="time" label="发布时间" sortable/>
        <el-table-column label="操作" width="250">
            <template #default="scope">
                <el-button type="danger" @click="deletePost(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div style="position:fixed; bottom: 0; right: 20px; width:100%;z-index: 100">
        <el-pagination style="float:right;"
                       layout="total, sizes, prev, pager, next, jumper"
                       :page-sizes="[5, 8, 10, 20, 50]"
                       v-model:current-page="page.pageNum"
                       v-model:page-size="page.pageSize"
                       :total="page.total"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
        />
    </div>
</template>

<script setup lang="ts">
import {nextTick, onMounted, ref} from "vue";
import {ElMessage, FormInstance} from "element-plus";
import axios from 'axios'

const post = ref({
    text: '',
    id: '',
    time: '',
    likeCount: '',
    collectCount: '',
    commentCount: '',
    tx: '',
    yhm: '',
    nc: ''
})

const page = ref({
    pageNum: 1,     // 当前页码
    pageSize: 8,    // 每页显示的记录数
    pages: 0,       // 总页数
    total: 0        // 总记录数
})

//重置表单
const reset = () => {
    post.value.text = '';
    post.value.id = '';
    post.value.time = '';
    doPageReset();
    doList();
}

const doPageReset = () => {
    page.value.pageNum = 1;
    page.value.pageSize = 8;
    page.value.pages = 0;
    page.value.total = 0;
}

const tableData = ref([]);
onMounted(() => {
    doList();
})

// 分页大小改变时触发
const handleSizeChange = (val: number) => {
    page.value.pageSize = val;
    page.value.pageNum = 1; // 页大小改变时回到第一页
    doList();
}

// 当前页改变时触发
const handleCurrentChange = (val: number) => {
    page.value.pageNum = val;
    doList();
}

const doList = async () => {
    // 正确封装分页参数，避免传递整个对象导致URL非法字符
    const params = {
        text: post.value.text,
        time: post.value.time,
        pageNum: page.value.pageNum,
        pageSize: page.value.pageSize
    };

    const {data} = await axios.get('/api/postUser/ui', {params:params});
    tableData.value = data.list || [];
    page.value.pages = data.pages || 0;
    page.value.total = data.total || 0;
}

//--------------------------- 删除 ---------------------------
const deletePost = async (id) => {
    const {data} = await axios.delete(`/api/post/${id}`);
    if(data > 0){
        doList() ;
        ElMessage.success('删除成功');
    }else{
        ElMessage.error('删除失败');
    }
}
</script>

<style scoped>
</style>
